<template xmlns="http://www.w3.org/1999/html">
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 分类文章列表 -->
        <div class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700">
          <h1 class="flex items-center text-lg font-semibold text-gray-900 dark:text-white">
            <!-- 文件夹图标 -->
            <svg t="1698998570037" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21572" width="200" height="200"><path d="M938.666667 464.592593h-853.333334v-265.481482c0-62.577778 51.2-113.777778 113.777778-113.777778h128.948148c15.17037 0 28.444444 3.792593 41.718519 11.377778l98.607407 64.474074h356.503704c62.577778 0 113.777778 51.2 113.777778 113.777778v189.62963z" fill="#3A69DD" p-id="21573"></path><path d="M805.925926 398.222222h-587.851852v-125.155555c0-24.651852 20.859259-45.511111 45.511111-45.511111h496.82963c24.651852 0 45.511111 20.859259 45.511111 45.511111V398.222222z" fill="#D9E3FF" p-id="21574"></path><path d="M843.851852 417.185185h-663.703704v-98.607407c0-28.444444 22.755556-53.096296 53.096296-53.096297h559.407408c28.444444 0 53.096296 22.755556 53.096296 53.096297V417.185185z" fill="#FFFFFF" p-id="21575"></path><path d="M786.962963 938.666667h-549.925926c-83.437037 0-151.703704-68.266667-151.703704-151.703704V341.333333s316.681481 37.925926 430.45926 37.925926c189.62963 0 422.874074-37.925926 422.874074-37.925926v445.62963c0 83.437037-68.266667 151.703704-151.703704 151.703704z" fill="#5F7CF9" p-id="21576"></path><path d="M559.407407 512h-75.851851c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h75.851851c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-37.925926 37.925926z" fill="#F9D523" p-id="21577"></path></svg>
            {{ categoryName }}
          </h1>
          <ol v-if="articles && articles.length > 0" class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
            <li v-for="(article, index) in articles" :key="index">
              <a @click.prevent="goArticleDetailPage(article.id)" href="#" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                <img class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0"
                     :src="article.cover" />
                <div class="text-gray-600 dark:text-gray-400">
                  <h2 class="text-base font-normal text-gray-900">
                    {{ article.title }}
                  </h2>
                  <span
                      class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                                        <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white"
                                             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                             viewBox="0 0 20 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                        </svg>
                                        {{ article.createDate }}
                                    </span>
                </div>
              </a>
            </li>
          </ol>
          <!-- 该分类下没有文章提示，制定其 flex 布局，内容垂直水平居中，并纵向排列 -->
          <div v-else class="flex items-center justify-center flex-col">
            <svg t="1743749279721" class="icon" viewBox="0 0 1554 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1778" width="200" height="200">
              <path
                  d="M1034.252816 208.901126v-1.602002h-1.602002c-8.170213-7.849812-19.06383-12.49562-31.078849-12.49562H551.729662c-24.991239 0-45.176471 20.505632-45.176471 45.657072v556.69587c0 15.219024 7.369212 28.515645 18.74343 36.846057v1.602003h2.242803c7.048811 4.485607 15.219024 7.048811 24.190238 7.209011h276.185232c11.854819 0.1602 45.496871 3.364205 60.555694 15.699624 5.446809 3.684606 12.65582 2.723404 16.821027-2.403003 4.165207-5.126408 3.524406-12.49562-1.121402-16.981227-1.441802-1.281602-3.043805-2.403004-4.645807-3.524405-25.31164-16.821026-66.322904-17.782228-71.289112-17.942428H551.729662c-11.214018 0-20.345432-9.291615-20.345432-20.505632V240.460576c0-11.374218 9.131414-20.505632 20.345432-20.505632h109.256571v0.3204c1.281602 0.1602 22.908636 2.563204 31.719649 22.748436 1.762203 6.888611 10.573217 34.122653 40.851064 39.409261l0.961202 0.320401H855.469337l0.961201-0.320401c30.438048-5.446809 39.088861-32.520651 40.851064-39.409261 8.811014-20.185232 30.438048-22.748436 31.71965-22.748436v-0.3204h72.410513c11.214018 0 20.345432 9.291615 20.345431 20.505632v556.69587c0 11.374218-9.131414 20.505632-20.345431 20.505632h-60.235294c-6.40801 0.480601-11.374218 6.08761-11.374218 12.495619 0 1.922403 0.480601 3.684606 1.281602 5.446809 1.922403 3.844806 5.607009 6.728411 10.252816 7.209011h60.235294c8.971214 0 17.301627-2.563204 24.350438-7.209011 3.043805-1.922403 5.767209-4.165207 8.170213-6.888611 7.849812-8.170213 12.49562-19.38423 12.495619-31.559449V240.460576c0.1602-12.335419-4.645807-23.389237-12.335419-31.55945z m-159.239049 30.277848l-0.480601 1.121401-0.3204 1.281602c0 0.1602-3.524406 17.301627-20.345432 20.826033h-116.946183c-16.020025-3.524406-20.025031-19.544431-20.345431-20.986233l-0.160201-0.961201-0.4806-1.281602c-2.082603-5.126408-4.806008-9.932416-8.330413-14.418023h175.739674c-3.524406 4.325407-6.40801 9.131414-8.330413 14.418023z"
                  fill="#90999F" p-id="1779"></path>
              <path
                  d="M941.01627 607.79975c-34.763454-44.85607-90.352941-74.973717-151.229036-75.133918-56.390488-0.320401-109.897372 24.670839-145.942428 67.604506-5.286608 7.369212 9.291615 21.947434 17.782228 13.617021 31.559449-36.365457 76.57572-59.274093 128.1602-59.274092 52.225282 0.1602 101.246558 24.030038 133.446809 64.5607 6.24781 8.490613 24.030038-4.966208 17.782227-11.374217zM936.690864 483.484355c12.175219-0.1602 22.107635-9.932416 22.107634-21.787234 0-8.811014-5.446809-16.981227-13.617021-20.185231-8.330413-3.364205-17.782228-1.602003-24.030038 4.806007-6.24781 6.24781-8.170213 15.699625-4.806007 23.869838 3.524406 8.010013 11.374218 13.296621 20.345432 13.29662zM663.709637 477.236546c4.165207-4.165207 6.40801-9.772215 6.24781-15.699625 0-12.175219-9.932416-21.947434-22.107635-21.947434-12.175219 0-22.107635 9.772215-22.107634 21.947434s9.932416 21.947434 22.107634 21.947434c6.08761 0.1602 11.694618-2.082603 15.859825-6.247809z"
                  fill="#90999F" p-id="1780"></path>
              <path
                  d="M506.553191 967.449312c0 31.239049 120.951189 56.550688 270.097623 56.550688s270.097622-25.31164 270.097622-56.550688c0-31.239049-120.951189-56.550688-270.097622-56.550689s-270.097622 25.31164-270.097623 56.550689z m0 0"
                  fill="#EEEEEE" p-id="1781"></path>
              <path
                  d="M1260.77597 556.215269c0 9.291615 6.24781 17.622028 15.379224 19.864831 9.131414 2.403004 18.743429-1.602003 23.389237-9.612015 4.806008-8.010013 3.364205-18.262829-3.364206-24.831039-6.728411-6.728411-16.981227-8.010013-25.151439-3.364205-6.24781 3.844806-10.252816 10.573217-10.252816 17.942428zM170.132666 394.413016h-15.539424c0 7.048811 4.806008 13.136421 11.534418 15.058824 6.728411 1.762203 13.937422-1.121402 17.622027-7.209011 3.524406-6.08761 2.563204-13.777222-2.403004-18.74343-4.966208-4.966208-12.65582-5.927409-18.903629-2.403004-4.806008 2.723404-7.849812 7.849812-7.849812 13.296621h15.539424zM1198.618273 427.574468c0-19.864831-16.340426-36.045056-36.205257-36.045056-20.025031 0-36.205257 16.180225-36.205256 36.045056s16.340426 36.045056 36.205256 36.045056c19.864831-0.320401 35.884856-16.340426 36.205257-36.045056zM1452.85607 528.180225c-35.244055 0-65.041302-29.637046-65.041302-64.720901s29.797247-64.720901 65.041302-64.720901 65.041302 29.637046 65.041302 64.720901-29.797247 64.720901-65.041302 64.720901z m0-113.261577c-26.593242 0-49.021277 22.267835-49.021277 48.700876s22.428035 48.700876 49.021277 48.700877 49.021277-22.267835 49.021277-48.700877-22.428035-48.700876-49.021277-48.700876zM1203.744681 0c-20.025031 0-36.205257 16.180225-36.205257 36.045056S1183.87985 72.090113 1203.744681 72.090113c19.864831-0.320401 36.045056-16.180225 36.205256-36.045057 0.1602-19.864831-16.180225-36.045056-36.205256-36.045056z m0 51.584481c-8.490613-0.320401-15.219024-7.048811-15.539424-15.539425 0-8.650814 6.888611-15.539424 15.539424-15.539424 8.650814 0 15.539424 6.888611 15.539424 15.539424-0.1602 8.490613-7.048811 15.539424-15.539424 15.539425z"
                  fill="#AAAAAA" p-id="1782"></path>
              <path
                  d="M1384.290363 297.652065h-17.622028c-6.24781 0-11.214018 5.126408-11.214017 11.214018s4.966208 11.214018 11.214017 11.214017h17.622028v17.622028c0 6.24781 5.126408 11.214018 11.374218 11.214017 6.24781 0 11.374218-5.126408 11.374217-11.214017V320.400501h17.622028c4.165207 0 8.010013-2.082603 9.932416-5.607009 2.082603-3.524406 2.082603-7.849812 0-11.374218-2.082603-3.524406-5.927409-5.607009-9.932416-5.607009h-17.622028V280.350438c0-6.24781-5.126408-11.214018-11.374217-11.214017-6.24781 0-11.374218 5.126408-11.374218 11.214017v17.301627z"
                  fill="#AAAAAA" p-id="1783"></path>
              <path
                  d="M372.625782 698.312891h-31.078848c-5.767209 0-10.413016 4.645807-10.413017 10.252816 0 6.08761 4.165207 10.252816 10.413017 10.252816h31.078848V749.737171c0 5.607009 4.645807 10.252816 10.413016 10.252816 6.24781 0 10.413016-4.165207 10.413017-10.252816v-30.758448H424.530663c5.767209 0 10.413016-4.645807 10.413017-10.252816 0-6.08761-4.165207-10.252816-10.413017-10.252816h-31.078848v-30.918648c0-5.607009-4.645807-10.252816-10.413017-10.252816-6.24781 0-10.413016 4.165207-10.413016 10.252816v30.758448z"
                  fill="#AAAAAA" p-id="1784"></path>
            </svg>
            <p class="mt-2 mb-16 text-gray-400">此分类下还未发布文章哟~</p>
          </div>
        </div>
        <!-- 分页 -->
        <nav aria-label="Page navigation example" class="mt-10 flex justify-center" v-if="pages > 1">
          <ul class="flex items-center -space-x-px h-10 text-base">
            <!-- 上一页 -->
            <li>
              <a @click="getCategoryArticles(current - 1)"
                 class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 :class="[current > 1 ? '' : 'cursor-not-allowed']">

                <span class="sr-only">上一页</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="M5 1 1 5l4 4" />
                </svg>
              </a>
            </li>
            <!-- 页码 -->
            <li v-for="(pageNo, index) in pages" :key="index">
              <a @click="getCategoryArticles(pageNo)"
                 class="flex items-center justify-center px-4 h-10 leading-tight border  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 :class="[pageNo == current ? 'text-blue-600  bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700']">
                {{ index + 1 }}
              </a>
            </li>
            <!-- 下一页 -->
            <li>
              <a @click="getCategoryArticles(current + 1)"
                 class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 :class="[current < pages ? '' : 'cursor-not-allowed']">
                <span class="sr-only">下一页</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="m1 9 4-4-4-4" />
                </svg>
              </a>
            </li>
          </ul>
        </nav>

      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">
        <!-- 博主信息 -->
        <UserInfoCard></UserInfoCard>

        <!-- 分类 -->
        <CategoryListCard></CategoryListCard>

        <!-- 标签 -->
        <TagListCard></TagListCard>
      </aside>
    </div>
  </main>
  <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import {ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import { getCategoryArticlePageList } from '@/api/frontend/category'
import router from "@/router/index.js";



// 文章集合
const articles = ref([])

const route = useRoute()
// 分类名称
const categoryName = ref(route.query.name)
// 分类 ID
const categoryId = ref(route.query.id)

// 监听路由
watch(route, (newRoute, oldRoute) => {
  categoryName.value = newRoute.query.name
  categoryId.value = newRoute.query.id
  getCategoryArticles(current.value)
})

// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(10)
// 总文章数
const total = ref(0)
// 总共多少页
const pages = ref(0)

function getCategoryArticles(currentNo) {
  // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
  if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return
  // 调用分页接口渲染数据
  getCategoryArticlePageList({current: currentNo, size: size.value, id: categoryId.value}).then((res) => {
    if (res.success) {
      articles.value = res.data
      current.value = res.current
      size.value = res.size
      total.value = res.total
      pages.value = res.pages
      console.log(articles)
    }
  })
}
getCategoryArticles(current.value)

// 跳转文章详情页
const goArticleDetailPage = (articleId) => {
  router.push('/article/' + articleId)
}
</script>
